<template>
  <div>
    <h2>子组件</h2>
    <ul>
      <li>{{ money }}</li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script setup lang="ts">
// 导包加 type 关键字，表明导入的是 ts 的类型
import type {Props, Emit} from '../../types/son'
//  2. 接收父组件传递过来的数据 props=>defineProps
// 说明：defineProps是泛型函数,通过泛型参数指定 props 类型
// interface Props {
//   // 说明：加?表示可选父传子属性
//   money?: number
//   parentFn: (sonData:number) => void
// }
// 接收父组件数据，不能设置默认值
//  const props = defineProps<Props>()
// 接收父组件数据，可以设置默认值
const props = withDefaults(defineProps<Props>(), {
  // 设置父传子默认值
  money: 0
})
console.log('js 获取父传子数据：', props)
// 子调用父方法
// props.parentFn(1e4)

//  1. 子传父=>通过defineEmits
// 说明：defineEmits是泛型函数，通过泛型参数指定子传父事件名+参数类型
const emit = defineEmits<Emit>()

emit('changeMoney', 1e3)

</script>

<style scoped>

</style>